# 前言
通过前面的小节，我们知道，组件的渲染成 vnode 的过程，其实就是组件的 render 函数调用执行的结果。但是我们写 Vue 项目时，经常会使用 <template> 的模版式写法，很少使用 render 函数的写法，那么 Vue 是如何实现从 模版 转成 render 函数的呢？
另外，关于模版编译成 render 函数的结果，也可以通过官方提供的 模版导出工具 现在调试编译结果。
Vue3 的核心编译源码文件在 packages/compiler-dom/src/index.ts 中：
function compile(template, options = {}) {
return baseCompile(template, extend({}, parserOptions, options, {
nodeTransforms: [...DOMNodeTransforms, ...(options.nodeTransforms || [])],
directiveTransforms: extend({}, DOMDirectiveTransforms, options.directiveTransforms || {}),
transformHoist: null
}))
}
@前端进阶之旅: 代码已经复制到剪贴板
其核心调用的就是 baseCompile 函数，接下来一起看一下 baseCompile 的实现：
arduino
复制代码export function baseCompile(template, options = {}) {
// 如果是字符串模版，则直接进行解析，转成 AST
const ast = isString(template) ? baseParse(template, options) : template
const [nodeTransforms, directiveTransforms] =
getBaseTransformPreset(prefixIdentifiers)
// AST 转换成 JS AST
transform(
ast,
extend({}, options, {
prefixIdentifiers,
nodeTransforms: [
...nodeTransforms,
...(options.nodeTransforms || []) // user transforms
],
directiveTransforms: extend(
{},
directiveTransforms,
options.directiveTransforms || {} // user transforms
)
})
)
// JS AST 生成代码
return generate(
ast,
extend({}, options, {
prefixIdentifiers
})
)
}
@前端进阶之旅: 代码已经复制到剪贴板
可以看到 baseCompile 函数核心就只有 3 步：
- 对
template模版进行词法和语法分析，
